<script setup lang="ts">
import { reactive, ref } from 'vue';
import constant from "@/utils/constant"
import { useAuthenticationApi } from '@/apis/login'
import { useGetDictTypeApi } from "@/apis/order"
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/user'

onLoad((options: any) =>{
	const userInfo = JSON.parse(decodeURIComponent(options.info))
	description.value = userInfo.overruleCause
	for (const key in form) {
		form[key] = userInfo[key]
	}
	useGetDictTypeApi().then(res =>{
		orderTypeColumns.value = res.dataList
	})
})

const userStore = useUserStore()
const description = ref("")
const orderTypeEnable = ref(false)
const orderTypeColumns = ref([])

const form = reactive({
	name: "",
	legalPerson: "",
	legalPersonPhone: "",
	address: "",
	idNum: "",
	remark: "",
	legalPersonIdCardImg: "",
	businessLicenseImg: "",
	contactIdCardImg: "",
	// typeId: "",
	// typeName: "",
	// cargoName: "",
	// cargoTypeId: "",
	// cargoGrossWeight: "",
	// loadingAddress: "",	
	// unloadingAddress: ""	
}) 
const formRef = ref()
const images = reactive<any>({
	legalPersonIdCardImg: [],
	businessLicenseImg: [],
	contactIdCardImg: [],
})
const rules = {
	name: {required: true,message: '必须填写托运人(企业)全称',trigger: ['change','blur']},
	legalPerson: {required: true,message: '必须填写企业法人姓名',trigger: ['change','blur']},
	legalPersonPhone: {
		required: true, 
		trigger: ['change','blur'],
		pattern: /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/,
		transform(value: any) {
			return String(value);
		},
		message: '请输入正确的手机号'},
	address: {required: true,message: '必须填写企业通信地址',trigger: ['change','blur']},
	idNum: {required: true,message: '必须填写个人证件号',trigger: ['change','blur']},
	legalPersonIdCardImg: {required: true,message: '必须上传法人身份证',trigger: ['change','blur']},
	businessLicenseImg: {required: true,message: '必须上传营业执照',trigger: ['change','blur']},
	contactIdCardImg: {required: true,message: '必须上传托运人身份证',trigger: ['change','blur']}
}

// function orderConfirm(e){
// 	form.typeName = e.value[0].dictLabel
// 	form.typeId = e.value[0].dictValue
// 	orderTypeEnable.value = false
// }

function deletePic(event, key: string){
  images[key].splice(event.index, 1);
  form[key] = ""
}
	
async function afterRead(event, key: string){
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	const lists: any = [].concat(event.file);
	let fileListLen = images[key].length;
	lists.forEach((item: any) => {
	images[key].push({
	    ...item,
	    status: 'uploading',
		message: '上传中',
		});
	});
	for (let i = 0; i < lists.length; i++) {
		const result = await uploadFilePromise(lists[i].url);
		const item = images[key][fileListLen];
		images[key].splice(fileListLen, 1, {
			...item,
			status: 'success',
			message: '',
			url: result,
		});
		form[key] = JSON.parse(result as string).data
		fileListLen++;
	}
};
	
	
function uploadFilePromise(url){
	return new Promise((resolve) => {
		uni.uploadFile({
			url: constant.uploadUrl, // 仅为示例，非真实的接口地址
			filePath: url,
			name: 'file',
			header: {
				Authorization: userStore.token
			},
			formData: {
			},
			success: (res: any) => {
				setTimeout(() => {
					resolve(res.data);
				}, 1000)
			}
	    });
	});
};
	
function submit(){
	console.log(form);
	formRef.value.validate().then(valid => {
		if(valid){
			uni.showLoading({
				title: "正在提交数据请稍后"
			})
			useAuthenticationApi(form).then(()=> {
				uni.hideLoading()
				uni.redirectTo({
					url: "/pages/authentication/loading"
				})
			})
		}
	})
}
	

</script>

<template>
	<view style="padding: 10px 20px">
		<u-alert v-if="!!description" title="驳回原因"  type="warning" :closable="true" :description = "description"/>
		<u-form :model="form" ref="formRef" :rules="rules" label-position="top">
			<u-form-item prop="name" label="托运人(企业)全称" :required="true" label-width="125" borderBottom>
				<u-input v-model="form.name" border="none" placeholder="必须填写托运人(企业)全称"/>
			</u-form-item>
			<u-form-item prop="legalPerson" label="企业法人姓名" :required="true" label-width="100" borderBottom>
				<u-input v-model="form.legalPerson" border="none" placeholder="必须填写企业法人姓名"/>
			</u-form-item>
			<u-form-item prop="legalPersonPhone" label="企业法人联系方式" :required="true" label-width="125" borderBottom>
				<u-input v-model="form.legalPersonPhone" border="none" placeholder="必须填写企业法人联系方式"/>
			</u-form-item>
			<u-form-item prop="address" label="企业通信地址" :required="true" label-width="100" borderBottom>
				<u-input v-model="form.address" border="none" placeholder="必须填写企业通信地址"/>
			</u-form-item>
			<u-form-item prop="idNum" label="个人证件号" :required="true" label-width="100" borderBottom>
				<u-input v-model="form.idNum" border="none" placeholder="必须填写个人证件号"/>
			</u-form-item>
			<u-form-item prop="remark" label="备注">
				<u-textarea v-model="form.remark" placeholder="备注" height="100" />
			</u-form-item>
			<u-form-item prop="legalPersonIdCardImg" label="法人身份证(正面)" label-width="130" :required="true">
				<u-upload
						:fileList="images.legalPersonIdCardImg"
						@afterRead="(event) => afterRead(event, 'legalPersonIdCardImg')"
						@delete="(event) => deletePic(event, 'legalPersonIdCardImg')"
						name="1"
						multiple
						:maxCount="1"
					/>
			</u-form-item>
			<u-form-item prop="businessLicenseImg" label="营业执照" label-width="100" :required="true">
			<u-upload
					:fileList="images.businessLicenseImg"
					@afterRead="(event) => afterRead(event, 'businessLicenseImg')"
					@delete="(event) => deletePic(event, 'businessLicenseImg')"
					name="2"
					multiple
					:maxCount="1"
				/>
			</u-form-item>
			<u-form-item prop="contactIdCardImg" label="托运人身份证(正面)" label-width="140" :required="true">
				<u-upload
						:fileList="images.contactIdCardImg"
						@afterRead="(event) => afterRead(event, 'contactIdCardImg')"
						@delete="(event) => deletePic(event, 'contactIdCardImg')"
						name="3"
						multiple
						:maxCount="1"
					/>
			</u-form-item>
			<!-- <text style="color: red;">以下为申请订单时默认的模板类容，可作为选填</text>
			<u-form-item
				prop="typeName"
				label="默认订单类型" 
				@click="orderTypeEnable = true" 
				label-width="100"
				borderBottom
			>
				<u-input v-model="form.typeName" border="none" placeholder="订单类型"/>
			</u-form-item>
			<u-form-item prop="cargoName" label="默认货物名称" borderBottom label-width="100">
				<u-input v-model="form.cargoName" border="none" placeholder="默认货物名称" height="140" />
			</u-form-item>
			<u-form-item prop="" label="货物种类" borderBottom label-width="100">
				<u-input v-model="form.remark" border="none" placeholder="货物种类" height="140"/>
			</u-form-item>
			<u-form-item prop="cargoGrossWeight" label="默认货物毛重" borderBottom label-width="100">
				<u-input v-model="form.cargoGrossWeight" border="none" placeholder="默认货物毛重" height="140"/>
			</u-form-item>
			<u-form-item prop="loadingAddress" label="默认装货点" borderBottom label-width="100">
				<u-input v-model="form.loadingAddress" border="none" placeholder="默认装货点" height="140" />
			</u-form-item>
			<u-form-item prop="unloadingAddress" label="默认卸货点" borderBottom label-width="100">
				<u-input v-model="form.unloadingAddress" border="none" placeholder="默认卸货点" height="140"/>
			</u-form-item> -->
		</u-form>
		<u-picker :show="orderTypeEnable" :columns="[orderTypeColumns]" keyName="dictLabel" @confirm="orderConfirm" closeOnClickOverlay />
		<u-button type="primary" @click="submit">提交</u-button>
	</view>
</template>

<style>

</style>
